<%@ page contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<c:set var="extLibs" value="validate"/>
<c:set var="extHead">
	<link href="${ctxStatic}/assets/admin/pages/css/login-soft.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript">
		// 如果在框架或在对话框中，则弹出提示并跳转到首页
		if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('.jbox').length > 0){
			alert('未登录或登录超时。请重新登录，谢谢！');
			top.location = "${ctx}";
		}
	</script>
</c:set>
<sys:header title="登录" extLibs="${extLibs}" extHead="${extHead}" bodyClass="login"/>
<body class="login">
<!-- BEGIN LOGO -->
<div class="logo">
	<%-- <a href="index.html">
		<img src="${ctxStatic}/assets/admin/layout/img/logo-big.png" alt=""/>
	</a> --%>
	<h1>${fns:getConfig('productName')}</h1>
</div>
<!-- END LOGO -->
<!-- BEGIN LOGIN -->
<div class="content">
	<!-- BEGIN LOGIN FORM -->
	<form class="login-form" action="${ctx}/login" method="post">
		<h3 class="form-title">登录您的账号</h3>
		<div id="messageBox" class="alert alert-danger ${empty message ? 'hide' : ''}">
			<button data-dismiss="alert" class="close">×</button>
			<span id="loginError" >${message}</span>
		</div>
		<div class="form-group">
			<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<!-- 			<label class="control-label visible-ie8 visible-ie9">登录账号</label> -->
			<div class="input-icon">
				<i class="fa fa-user"></i>
				<input class="form-control" type="text" autocomplete="off" placeholder="登录账号" name="username" value="${rememberUserCode  ? username : ( not empty cookie.rememberUserCode.value ? cookie.rememberUserCode.value : '') }"/>
			</div>
		</div>
		<div class="form-group">
<!-- 			<label class="control-label visible-ie8 visible-ie9">登录密码</label> -->
			<div class="input-icon">
				<i class="fa fa-lock"></i>
				<input id="password" class="form-control" type="password" autocomplete="off" placeholder="登录密码" name="password"/>
			</div>
		</div>
		<c:if test="${isValidateCodeLogin}">
			<div class="form-group">
				<div class="input-icon">
					<div class="validateCode"><label class="input-label" for="validateCode">验证码 </label>
						<sys:validateCode name="validateCode" inputCssStyle="" linkCssStyle="color:#fff"/>
					</div>
				</div>
			</div>
		</c:if>
		<div class="form-actions">
			<label for="rememberUserCode" title="记住用户名"><input type="checkbox" id="rememberUserCode" name="rememberUserCode" ${not empty cookie.rememberUserCode.value ? 'checked' : ''}/> 记住用户名</label>
			&nbsp;&nbsp;
			<label for="rememberMe" title="公共场所慎用,下次不需要再登录"><input type="checkbox" id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''}/> 记住密码</label>
			<button type="submit" class="btn blue pull-right">
			登 录 <i class="m-icon-swapright m-icon-white"></i>
			</button>
		</div>
		<div class="forget-password create-account">
			<p><a href="javascript:;" id="forget-password" style="color:#fff;">忘记密码？ </a>
			<a href="javascript:;" id="register-btn" style="color:#fff;">申请账号。</a></p>
		</div>
	</form>
	<!-- END LOGIN FORM -->
	<!-- BEGIN FORGOT PASSWORD FORM -->
	<form class="forget-form" action="resetPassword" method="post" style="display:none">
		<input type="hidden" name="id" value="" />
		<input type="hidden" name="type" value="1" />
		<h3>忘记密码？</h3>
		<span></span>
		<div class="reset r1">
			<p>下面输入您的电子邮件地址重新设置您的密码。</p>
			<div class="form-group">
				<div class="input-icon">
					<i class="fa fa-envelope"></i>
					<input class="form-control" type="text" autocomplete="off" placeholder="电子邮箱地址" name="email"/>
				</div>
			</div>
		</div>
		<div class="reset r2">
			<p>下面输入您的密保问题重新设置您的密码。</p>
			<div class="form-group">
				<div class="input-icon">
					<input class="form-control" type="text" autocomplete="off" placeholder="问题1" name="pwdQuestionAnswer"/>
				</div>
			</div>
			<div class="form-group">
				<div class="input-icon">
					<input class="form-control" type="text" autocomplete="off" placeholder="问题2" name="pwdQuestionAnswer2"/>
				</div>
			</div>
			<div class="form-group">
				<div class="input-icon">
					<input class="form-control" type="text" autocomplete="off" placeholder="问题3" name="pwdQuestionAnswer3"/>
				</div>
			</div>
		</div>
		<div class="reset r3">
			<p>下面输入您的手机号码重新设置您的密码。</p>
			<div class="form-group">
				<div class="input-icon">
					<i class="fa fa-mobile-phone"></i>
					<input class="form-control" type="text" autocomplete="off" placeholder="手机号码" name="mobile"/>
				</div>
			</div>
		</div>
		<div class="form-actions">
			<span class="blue">
			<select name="resetPass" class="m-icon-swapleft m-icon-white" style="width:150px;">
				<option value="1" selected="selected">通过邮箱找回</option>
				<option value="2">通过密保问题找回</option>
				<option value="3">通过手机号码找回</option>
			</select>
			</span>
			<button type="submit" class="btn blue pull-right">
			发送重置申请 <i class="m-icon-swapright m-icon-white"></i>
			</button>
		</div>
	</form>
	<form class="forget-validat" action="checkValidat" method="post" style="display:none">
		<input type="hidden" name="id" value="" />
		<span></span>
		<p>请输入验证码</p>
		<div class="form-group">
			<div class="input-icon">
				<i class="fa fa-envelope"></i>
				<input class="form-control" type="text" autocomplete="off" placeholder="验证码" name="extendS1"/>
			</div>
		</div>
		<div class="form-actions">
			<button type="submit" class="btn blue pull-right">
			确定 <i class="m-icon-swapright m-icon-white"></i>
			</button>
		</div>
	</form>
	<form class="forget-setPassword" action="setNewPassword" method="post" style="display:none">
		<input type="hidden" name="id" value="" />
		<span></span>
		<p>请输入新密码</p>
		<div class="form-group">
			<div class="input-icon">
				<i class="fa fa-envelope"></i>
				<input class="form-control" type="password" autocomplete="off" placeholder="新密码" name="password"/>
			</div>
		</div>
		<div class="form-actions">
			<button type="submit" class="btn blue pull-right">
			确定 <i class="m-icon-swapright m-icon-white"></i>
			</button>
		</div>
	</form>
	<!-- END FORGOT PASSWORD FORM -->
	<!-- BEGIN REGISTRATION FORM -->
	<form class="register-form" action="" method="post" style="display:none">
		<h3>注册账号</h3>
		<p>
			 输入您的个人信息如下:
		</p>
		<div class="form-group">
			<label class="control-label visible-ie8 visible-ie9">昵称</label>
			<div class="input-icon">
				<i class="fa fa-font"></i>
				<input class="form-control" type="text" placeholder="昵称" name="fullname"/>
			</div>
		</div>
		<div class="form-group">
			<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
			<label class="control-label visible-ie8 visible-ie9">邮箱</label>
			<div class="input-icon">
				<i class="fa fa-envelope"></i>
				<input class="form-control" type="text" placeholder="邮箱" name="email"/>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label visible-ie8 visible-ie9">地址</label>
			<div class="input-icon">
				<i class="fa fa-check"></i>
				<input class="form-control" type="text" placeholder="地址" name="address"/>
			</div>
		</div>
		<p>
			 输入您的帐户详细信息如下:
		</p>
		<div class="form-group">
			<label class="control-label visible-ie8 visible-ie9">登录账号</label>
			<div class="input-icon">
				<i class="fa fa-user"></i>
				<input class="form-control" type="text" autocomplete="off" placeholder="登录账号" name="username"/>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label visible-ie8 visible-ie9">登录密码</label>
			<div class="input-icon">
				<i class="fa fa-lock"></i>
				<input class="form-control" type="password" autocomplete="off" id="register_password" placeholder="登录密码" name="password"/>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label visible-ie8 visible-ie9">确认登录密码</label>
			<div class="controls">
				<div class="input-icon">
					<i class="fa fa-check"></i>
					<input class="form-control" type="password" autocomplete="off" placeholder="确认登录密码" name="rpassword"/>
				</div>
			</div>
		</div>
		<div class="form-group">
			<label><input type="checkbox" name="tnc"/>我已阅读并同意协议内容。<a href="#">查看协议</a></label>
			<div id="register_tnc_error"></div>
		</div>
		<div class="form-actions">
			<button id="register-back-btn" type="button" class="btn">
			<i class="m-icon-swapleft"></i> 返回 </button>
			<button type="submit" id="register-submit-btn" class="btn blue pull-right">
			申请注册账号 <i class="m-icon-swapright m-icon-white"></i>
			</button>
		</div>
	</form>
	<!-- END REGISTRATION FORM -->
</div>
<!-- END LOGIN -->
<!-- BEGIN COPYRIGHT -->
<div class="copyright">
	 Copyright &copy; 2013-${fns:getConfig('copyrightYear')} ${fns:getConfig('companyName')}
</div>
<!-- END COPYRIGHT -->
<sys:footer extLibs="${extLibs}"/>
<script src="${ctxStatic}/assets/global/plugins/jquery-backstretch/jquery.backstretch.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/assets/admin/pages/scripts/login-soft.js" type="text/javascript"></script>
<script src="${ctxStatic}/common/des.min.js?${_version}" type="text/javascript"></script>
<script type="text/javascript">
	var pwdKey = '${fns:getConfig("shiro.loginPassword.secretKey")}';
	var ok = false;
	var val = 0;
	
	$(document).ready(function() {
		jQuery('.reset').css("display","none");
		jQuery('.r1').css("display","");
		jQuery('.forget-validat').hide();
		jQuery('.forget-setPassword').hide();
		Login.init();
	});
	$('select[name="resetPass"]').change(function(){
		
		val = $(this).val();
		Log.log(val);
		if(val==0){
			return;	
		}
		$(".forget-form input[name='type']").val(val);
		
		jQuery('.reset').css("display","none");
		jQuery('.r'+val).css("display","");
		
	});
	
	function loadUser(){
		log('loading......');
		var username = jQuery('.login-form').find('input[name="username"]').val();
		var url = "${ctxPath}/forgetPassword";
		
		$.ajax({
			type : "POST",
			url  : url,
			data : {userCode: username},
			dataType : "json",
			success : function(data){
				setUser(data,username);
			}
		});
		
	}
	
	function setUser(data,username){
		if($.isEmptyObject(data)){
			jQuery('#messageBox').removeClass('hide').show();
			jQuery('#loginError').html('没有这个账号！');
            jQuery('.forget-form').hide();
			jQuery('.login-form').show();
			return;
		}else{
			$(".forget-form input[name='id']").val(data.id);
			$(".forget-validat input[name='id']").val(data.id);
			$(".forget-setPassword input[name='id']").val(data.id);

			var question = data.pwdQuestion;
			var qp = $('select[name="resetPass"] option[value="2"]');
			if(question==null||question==undefined||question==''){
			}else{
				$('input[name="pwdQuestionAnswer"]').attr("placeholder",data.pwdQuestion);
				$('input[name="pwdQuestionAnswer2"]').attr("placeholder",data.pwdQuestion2);
				$('input[name="pwdQuestionAnswer3"]').attr("placeholder",data.pwdQuestion3);
			}
			jQuery('.login-form').hide();
			jQuery('.forget-form').show();
		}
	}
	
	$(".forget-form").validate({
		submitHandler: function(form){
			var url = "${ctxPath}/resetPassword";
			var json = $('.forget-form').serialize();
			log('json:'+JSON.stringify(json));
			$.post(url,json,function(data){
				if(data.result == Global.TRUE){
					if(val==2){
						// 密保问题校验
						jQuery('.forget-setPassword span').html(data.message);
						jQuery('.forget-form').hide();
						jQuery('.forget-setPassword input[name="password"]').val('');
						jQuery('.forget-setPassword').show();
					}else{
						jQuery('.forget-validat span').html(data.message);
						jQuery('.forget-form').hide();
						jQuery('.forget-validat').show();
					}
				}else{
					jQuery('.forget-form').find('span').eq(0).html(data.message);
				}
			},"json");
		}
	});
	
	$(".forget-validat").validate({
		submitHandler: function(form){
			var url = "${ctxPath}/checkValidat";
			var json = $('.forget-validat').serialize();
			log('validat:'+JSON.stringify(json));
			$.post(url,json,function(data){
				if(data.result == Global.TRUE){
					jQuery('.forget-setPassword span').html(data.message);
					jQuery('.forget-validat').hide();
					jQuery('.forget-setPassword input[name="password"]').val('');
					jQuery('.forget-setPassword').show();
				}else{
					$(".forget-validat span").html(data.message);
				}
			},"json");
		}
	});
	$(".forget-setPassword").validate({
		submitHandler: function(form){
			var url = "${ctxPath}/setNewPassword";
			var json = $('.forget-setPassword').serialize();
			log('setPassword:'+JSON.stringify(json));
			$.post(url,json,function(data){
				jQuery('#loginError').html(data.message);
				jQuery('.login-form input[password]').val(json.password);
				jQuery('.forget-setPassword').hide();
				jQuery('.login-form').show();
				
			},"json");
		}
	});
</script>